<template>
  <div class="mcontaner">
    <Header></Header>

    <el-row>
      <el-button type="success" >实时天气</el-button>
      <el-button type="success" v-on:click="base">发送信息</el-button>
      <el-button type="success" v-on:click="resever">接收信息</el-button>
    </el-row>
    <br>
    <div class="space">
      <el-tag >位置:{{live.city}}</el-tag> |
      <el-tag type="success" >气温:{{live.temperature}}℃</el-tag> |
      <el-tag type="info" >风向:{{live.windpower}}级,{{live.winddirection}}风</el-tag> |
      <el-tag type="warning" >{{live.weather}} </el-tag> |
      <el-tag type="danger"  >湿度:{{live.humidity}} </el-tag> |
      <el-tag type="danger"  >获取时间:{{live.reporttime}} </el-tag>
    </div>
    <br>
    <el-row>
      <el-button type="primary" v-on:click="open">天气预报</el-button>
    </el-row>
    <div>
      <span>省份：</span>
      <span>{{province}}</span>
      <el-divider direction="vertical"></el-divider>
      <span>城市：</span>
      <span>{{city}}</span>
      <el-divider direction="vertical"></el-divider>
      <span>回报时间：</span>
      <span>{{reporttime}}</span>
    </div>
    <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        style="width: 100%"
        border
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="week"
          label="星期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="dayweather"
          label="天气"
          width="180">
      </el-table-column>
      <el-table-column
          prop="daytemp,nighttemp"
          label="气温"
          width="180">
        <template slot-scope="scope">
          <p>{{ Number(scope.row.daytemp)+"~"+ Number(scope.row.nighttemp)+"℃"}}</p>
        </template>
      </el-table-column>


      <el-table-column
          prop="daypower,daywind"
          label="气温"
          width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.daypower+"级"+ scope.row.daywind+"风"}}</p>
        </template>
      </el-table-column>

    </el-table>



  </div>
</template>

<script>
import Header from "../components/Header";

export default {
  name: "Push",
  components: {Header},
  data() {
    return {
      tableData:[],
      city:"",
      province:"",
      reporttime:"",
      loading: true,
      live:{

      },
    }
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
      open(){
        const _this = this
        _this.$axios.get("/wather").then(res => {
          _this.tableData = res.data.data.forecasts[0].casts;
          _this.city = res.data.data.forecasts[0].city;
          _this.province = res.data.data.forecasts[0].province;
          _this.reporttime = res.data.data.forecasts[0].reporttime;
          _this.loading = false;
          _this.live = res.data.data.lives[0];
        })
    },
    base(){
      const _this = this
      _this.$axios.get("/push").then(res => {

      })
    },
    resever(){
      const _this = this
      _this.$axios.get("/resever").then(res => {

      })
    }
  },
  created() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });


    const _this = this
    _this.$axios.get("/wather").then(res => {
      _this.tableData = res.data.data.forecasts[0].casts;
      _this.city = res.data.data.forecasts[0].city;
      _this.province = res.data.data.forecasts[0].province;
      _this.reporttime = res.data.data.forecasts[0].reporttime;
      _this.loading = false;
      _this.live = res.data.data.lives[0];
      loading.close();
    })
  },
  mounted(){
    // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
    window.onbeforeunload = function (e) {
      var storage = window.localStorage;
      storage.clear()
    }
  }

}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.space el-tag {
  display: inline-block;
  padding: .5em 1em;
}
</style>
